<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档列表</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <style>
        .docTitle{
            font-size: 44px;
            font-weight: 700;
            background: linear-gradient(to right, #41b5f3, #1361dc);
            -webkit-background-clip: text;
            color: transparent;
        }
        .docSearch{
            text-align: center;
            margin:0px auto;
            width: 550px;
        }
        .docSearch button{
            width: 50px;
            height: 50px;
            padding:0px;
            background-size:50px 50px;
            background-image:url('../../static/IMG/Common/search.png')
        }
        .docSearch input {
            width:500px;
            height: 50px;
        }
    </style>
</head>
<body style="margin:0px 200px;padding: 20px; background-color: #ffffff;">
    <div class="layui-row">
        <div style="height: 300px;">
            <div style="vertical-align:middle;text-align: center;margin: 0px auto;line-height: 200px;">
                <div class="docTitle">欢迎使用三维地理信息服务平台文档中心</div>
            </div>
            <div class="layui-row docSearch">
                <input type="text" name="docinfo" required lay-verify="required" placeholder="请输入查询内容"
                       autocomplete="off" class="layui-input layui-col-md6" />
                <button type="button" class="layui-btn layui-col-md6"></button>
            </div>
        </div>
        <div class="layui-row" style="font-size: 32px;height: 55px; font-weight: 700; background: linear-gradient(to right, #41b5f3, #1361dc);  -webkit-background-clip: text; color: transparent; border-bottom: 2px solid #9e9e9e;margin-bottom: 30px;">文件目录</div>
        <div class="layui-card-body" style="width: 85%; margin: 0 auto;">
            <div class="layui-row layui-col-space30">
                <div class="layui-col-md4 layui-col-space20">
                    <div class="layui-panel">
                        <div style="height: 240px;background-color: #fff;box-shadow: 0px 0px 6px #aaa; border: 1px solid #e5e5e5;display: flex;align-items: center;justify-content: center; cursor: pointer;">
                            <div style="width: 100px;margin: 0 auto; text-align: center;">
                                <img style=" display:block;width:70px;height:70px; margin: 0 auto;" src="./../../static/IMG/Document/Base.png" alt="">
                                <div style="font-size: 18px; font-weight: 700; width:100%;text-align: center;margin-top: 5px;">新手入门</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4 layui-col-space20">
                    <div class="layui-panel">
                        <div style="height: 240px;background-color: #fff;box-shadow: 0px 0px 6px #aaa; border: 1px solid #e5e5e5;display: flex;align-items: center;justify-content: center; cursor: pointer;">
                            <div style="width: 100px;margin: 0 auto; text-align: center;">
                                <img style=" display:block;width:70px;height:70px; margin: 0 auto;" src="./../../static/IMG/Document/yonghuguanli.png" alt="">
                                <div style="font-size: 18px; font-weight: 700; width:100%;text-align: center;margin-top: 5px;">用户管理</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4 layui-col-space20">
                    <div class="layui-panel">
                        <div style="height: 240px;background-color: #fff;box-shadow: 0px 0px 6px #aaa; border: 1px solid #e5e5e5;display: flex;align-items: center;justify-content: center; cursor: pointer;">
                            <div style="width: 100px;margin: 0 auto; text-align: center;">
                                <img style=" display:block;width:70px;height:70px; margin: 0 auto;" src="./../../static/IMG/Document/yingyongchuanjian.png" alt="">
                                <div style="font-size: 18px; font-weight: 700; width:100%;text-align: center;margin-top: 5px;">应用创建</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space30">
                <div class="layui-col-md4 layui-col-space20">
                    <div class="layui-panel">
                        <div style="height: 240px;background-color: #fff;box-shadow: 0px 0px 6px #aaa; border: 1px solid #e5e5e5;display: flex;align-items: center;justify-content: center; cursor: pointer;">
                            <div style="width: 100px;margin: 0 auto; text-align: center;">
                                <img style=" display:block;width:70px;height:70px; margin: 0 auto;" src="./../../static/IMG/Document/CreateModel.png" alt="">
                                <div style="font-size: 18px; font-weight: 700; width:100%;text-align: center;margin-top: 5px;">模板创建</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4 layui-col-space20">
                    <div class="layui-panel">
                        <div style="height: 240px;background-color: #fff;box-shadow: 0px 0px 6px #aaa; border: 1px solid #e5e5e5;display: flex;align-items: center;justify-content: center; cursor: pointer;">
                            <div style="width: 100px;margin: 0 auto; text-align: center;">
                                <img style=" display:block;width:70px;height:70px; margin: 0 auto;" src="./../../static/IMG/Document/Data.png" alt="">
                                <div style="font-size: 18px; font-weight: 700; width:100%;text-align: center;margin-top: 5px;">数据创建</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4 layui-col-space20">
                    <div class="layui-panel">
                        <div style="height: 240px;background-color: #fff;box-shadow: 0px 0px 6px #aaa; border: 1px solid #e5e5e5;display: flex;align-items: center;justify-content: center; cursor: pointer;">
                            <div style="width: 100px;margin: 0 auto; text-align: center;">
                                <img style=" display:block;width:70px;height:70px; margin: 0 auto;" src="./../../static/IMG/Document/yangshichuangjian.png" alt="">
                                <div style="font-size: 18px; font-weight: 700; width:100%;text-align: center;margin-top: 5px;">样式创建</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>   
        </div>

    </div>
    <script src="../../JS/jquery-2.0.3.js"></script>
    <script src="../../layui/layui.js" charset="utf-8"></script>
    <script>
        layui.use('element', function () {
            var element = layui.element;
            //监听导航点击
            element.on('nav(demo)', function (elem) {
                layer.msg(elem.text());
            });
        });
    </script>  
</body>
</html>